<template>
  <div class="container">
    <div class="title">
      <div class="big">
        <span>{{ titleData.greenTitle }}</span
        >{{ titleData.Title }}
      </div>
      <div class="small">{{ titleData.smallSpan }}</div>
    </div>
    <div class="swiper-banner-container">
      <div class="selected">
        <ul class="list">
          <li
            v-for="(item, index) in swiperData"
            :key="item.key"
            @click="to(index)"
            class="item"
          >
            {{ item.title }}
          </li>
        </ul>
      </div>
      <div class="swiper">
        <div class="app-container">
          <swiper :options="computedSwiperOption" ref="mySwiper" id="mySwiper">
            <swiper-slide
              class="swiper_slide_item"
              v-for="item in swiperData"
              :key="item.key"
            >
              <div class="img">
                <img :src="item.imgUrl" alt="swiperimg" />
              </div>
            </swiper-slide>
          </swiper>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "HomeMainBanner",
  props: {
    // 标题数据
    titleData: Object,
    // swiper字和图片数据
    swiperData: Array,
  },
  data() {
    return {
      // swiper配置
      swiperOption: {
        initialSlide: 0,
        setWrapperSize: true,
        effect: "coverflow",
        slidesPerView: 3,
        slideToClickedSlide: true, // 点击哪个，哪个就居中
        grabCursor: true,
        coverflowEffect: {
          rotate: 30,
          stretch: 10,
          depth: 50,
          modifier: 2,
          slideShadows: true,
        },
        centeredSlides: true,
        loop: false, //是否循环播放
        speed: 1000, // 发生页面切换动画时，动画的切换速度
      },
    };
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.$swiper;
    },
    initialSlide() {
      const swiperDataLength = this.swiperData.length;
      if (swiperDataLength % 2 === 0) {
        // 如果总长度是偶数
        return Math.floor(swiperDataLength / 2) - 1; // 取中间值的前一个索引
      } else {
        // 如果总长度是奇数
        return Math.floor(swiperDataLength / 2); // 取中间值的索引
      }
    },
    computedSwiperOption() {
      return {
        ...this.swiperOption,
        initialSlide: this.initialSlide,
      };
    },
  },
  methods: {
    to(index) {
      this.swiper.slideTo(index);
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 40px 0;
  width: 100%;
  .title {
    text-align: center;
    .big {
      font-size: 34px;
      font-weight: 900;
      letter-spacing: 6px;
      margin: 20px 0;
      opacity: 0.8;
      span {
        color: #31c46c;
      }
    }
    .small {
      margin: 20px 0;
      color: #8c8c8cff;
      font-size: 16px;
      font-weight: 400;
      text-align: center;
      letter-spacing: 3.6px;
    }
  }
  .swiper-banner-container {
    .selected {
      display: flex;
      justify-content: center;
      .list {
        display: flex;
        align-items: center;
        .item {
          padding: 0 35px;
          box-sizing: border-box;
          border-right: 2px solid #31c46c;
          color: #31c46c;
          font-size: 18px;
          cursor: pointer;
        }
        .item:last-child {
          border-right: none;
        }
      }
    }
    .swiper {
      margin: 20px 0;
      width: 1000px;
      .app-container {
        width: 1000px;
        .img {
          width: 340px;
          height: 200px;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
}
</style>
